<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体检预约系统</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
        }
        
        body {
            background-color: #f0f2f5;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 25px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eaeaea;
        }
        
        .header h1 {
            color: #2b7de3;
            font-size: 24px;
            margin-bottom: 8px;
        }
        
        .header p {
            color: #666;
            font-size: 14px;
        }
        
        .form-section {
            margin-bottom: 20px;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: bold;
            color: #2b7de3;
            margin-bottom: 15px;
            padding-left: 5px;
            border-left: 3px solid #2b7de3;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 6px;
            font-size: 14px;
            color: #555;
            font-weight: 500;
        }
        
        .form-control {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        
        .form-control:focus {
            border-color: #2b7de3;
            outline: none;
            box-shadow: 0 0 0 2px rgba(43, 125, 227, 0.2);
        }
        
        .radio-group {
            display: flex;
            gap: 20px;
        }
        
        .radio-option {
            display: flex;
            align-items: center;
        }
        
        .radio-option input {
            margin-right: 6px;
        }
        
        .btn {
            display: block;
            width: 100%;
            padding: 12px;
            background-color: #2b7de3;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 20px;
        }
        
        .btn:hover {
            background-color: #1a6bd1;
        }
        
        .error-message {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }
        
        .date-input-wrapper {
            position: relative;
        }
        
        .date-input-wrapper::after {
            content: "📅";
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }
        
        @media (max-width: 480px) {
            .container {
                padding: 15px;
            }
            
            .header h1 {
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>体检预约系统</h1>
            <p>请填写以下信息完成预约</p >
        </div>
        
        <form id="appointmentForm">
            <div class="form-section">
                <div class="section-title">基本信息</div>
                
                <div class="form-group">
                    <label for="fullName">姓名</label>
                    <input type="text" id="fullName" class="form-control" required>
                    <div class="error-message" id="nameError">请输入您的姓名</div>
                </div>
                
                <div class="form-group">
                    <label for="idNumber">身份证号</label>
                    <input type="text" id="idNumber" class="form-control" required>
                    <div class="error-message" id="idError">请输入正确的身份证号码</div>
                </div>
                
                <div class="form-group">
                    <label for="phone">手机号码</label>
                    <input type="tel" id="phone" class="form-control" required>
                    <div class="error-message" id="phoneError">请输入正确的手机号码</div>
                </div>
                
                <div class="form-group">
                    <label>性别</label>
                    <div class="radio-group">
                        <div class="radio-option">
                            <input type="radio" id="male" name="gender" value="male" checked>
                            <label for="male">男</label>
                        </div>
                        <div class="radio-option">
                            <input type="radio" id="female" name="gender" value="female">
                            <label for="female">女</label>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="form-section">
                <div class="section-title">预约信息</div>
                
                <div class="form-group">
                    <label for="package">体检套餐</label>
                    <select id="package" class="form-control" required>
                        <option value="">请选择体检套餐</option>
                        <option value="basic">基础套餐 (¥299)</option>
                        <option value="standard">标准套餐 (¥499)</option>
                        <option value="advanced">高级套餐 (¥899)</option>
                        <option value="vip">VIP尊享套餐 (¥1299)</option>
                    </select>
                    <div class="error-message" id="packageError">请选择体检套餐</div>
                </div>
                
                <div class="form-group">
                    <label for="appointmentDate">预约日期</label>
                    <div class="date-input-wrapper">
                        <input type="date" id="appointmentDate" class="form-control" required>
                    </div>
                    <div class="error-message" id="dateError">请选择预约日期</div>
                </div>
                
                <div class="form-group">
                    <label for="hospital">体检机构</label>
                    <select id="hospital" class="form-control" required>
                        <option value="">请选择体检机构</option>
                        <option value="hospital1">第一人民医院体检中心</option>
                        <option value="hospital2">市中心医院体检部</option>
                        <option value="hospital3">美年大健康体检中心</option>
                        <option value="hospital4">爱康国宾体检中心</option>
                    </select>
                    <div class="error-message" id="hospitalError">请选择体检机构</div>
                </div>
            </div>
            
            <button type="button" id="submitBtn" class="btn">提交预约</button>
        </form>
    </div>

    <script>
        // 设置最小日期为明天
        document.addEventListener('DOMContentLoaded', function() {
            const today = new Date();
            const tomorrow = new Date(today);
            tomorrow.setDate(today.getDate() + 1);
            
            const yyyy = tomorrow.getFullYear();
            const mm = String(tomorrow.getMonth() + 1).padStart(2, '0');
            const dd = String(tomorrow.getDate()).padStart(2, '0');
            
            const minDate = `${yyyy}-${mm}-${dd}`;
            document.getElementById('appointmentDate').min = minDate;
            
            // 设置默认日期为明天
            document.getElementById('appointmentDate').value = minDate;
        });

        // 表单验证和提交
        document.getElementById('submitBtn').addEventListener('click', function() {
            const form = document.getElementById('appointmentForm');
            const inputs = form.querySelectorAll('input, select');
            let isValid = true;
            
            // 隐藏所有错误信息
            document.querySelectorAll('.error-message').forEach(el => {
                el.style.display = 'none';
            });
            
            // 验证每个字段
            inputs.forEach(input => {
                if (input.required && !input.value) {
                    isValid = false;
                    const errorId = input.id + 'Error';
                    const errorElement = document.getElementById(errorId);
                    if (errorElement) {
                        errorElement.style.display = 'block';
                    }
                }
            });
            
            // 验证手机号码
            const phone = document.getElementById('phone').value;
            if (phone && !/^1[3-9]\d{9}$/.test(phone)) {
                isValid = false;
                document.getElementById('phoneError').textContent = '请输入正确的手机号码';
                document.getElementById('phoneError').style.display = 'block';
            }
            
            // 验证身份证号
            const idNumber = document.getElementById('idNumber').value;
            if (idNumber && !/^\d{17}[\dXx]$/.test(idNumber)) {
                isValid = false;
                document.getElementById('idError').textContent = '请输入正确的身份证号码';
                document.getElementById('idError').style.display = 'block';
            }
            
            // 如果验证通过，提交表单
            if (isValid) {
                const formData = {
                    name: document.getElementById('fullName').value,
                    idNumber: document.getElementById('idNumber').value,
                    phone: document.getElementById('phone').value,
                    gender: document.querySelector('input[name="gender"]:checked').value,
                    package: document.getElementById('package').value,
                    date: document.getElementById('appointmentDate').value,
                    hospital: document.getElementById('hospital').value
                };
                
                console.log('提交数据:', formData);
                
                // 这里可以替换为实际的AJAX请求
                alert('预约成功！\n姓名: ' + formData.name + 
                      '\n预约日期: ' + formData.date + 
                      '\n体检套餐: ' + document.getElementById('package').options[document.getElementById('package').selectedIndex].text);
                
                // 重置表单
                form.reset();
                
                // 重新设置默认日期为明天
                const today = new Date();
                const tomorrow = new Date(today);
                tomorrow.setDate(today.getDate() + 1);
                const yyyy = tomorrow.getFullYear();
                const mm = String(tomorrow.getMonth() + 1).padStart(2, '0');
                const dd = String(tomorrow.getDate()).padStart(2, '0');
                document.getElementById('appointmentDate').value = `${yyyy}-${mm}-${dd}`;
            }
        });
        
        // 实时验证输入
        document.getElementById('phone').addEventListener('input', function() {
            if (!/^1[3-9]\d{0,9}$/.test(this.value)) {
                this.setCustomValidity('请输入正确的手机号码');
            } else {
                this.setCustomValidity('');
            }
        });
        
        document.getElementById('idNumber').addEventListener('input', function() {
            if (!/^\d{0,17}[\dXx]?$/.test(this.value)) {
                this.setCustomValidity('请输入正确的身份证号码');
            } else {
                this.setCustomValidity('');
            }
        });
    </script>
</body>
</html>